<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta type="description" content="总代理-收藏中心">
    <title>收藏的商品</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./plugs/layui/css/layui.css">
    <link rel="stylesheet" href="./font/font_399822_6dl4ikiuwern3ik9/iconfont.css">
    <link rel="stylesheet" href="./css/background-style/background-common.css">
    <link rel="stylesheet" href="./css/background-style/background-option.css">
    <link rel="stylesheet" href="./css/background-style/main.css">
    <link rel="stylesheet" href="./css/background-style/aside.css">
    <link rel="stylesheet" href="./css/collection-center/concerned-products.css">
    <link rel="stylesheet" href="./css/collection-center/concerned-suppliers.css">
</head>
<body>
<!--顶部导航开始-->
<header>
    <ul class="layui-nav container">
        <li class="layui-nav-item">
            <a href=""><i class="iconfont">&#xe607;</i>陈小姐6666</a>
        </li>
        <li class="layui-nav-item">
            <a href=""><i class="iconfont">&#xe602;</i>我的工作台</a>
        </li>
        <li class="layui-nav-item">
            <a href=""><i class="iconfont">&#xe645;</i>收藏夹</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">收藏夹1</a></dd>
                <dd><a href="javascript:;">收藏夹2</a></dd>
                <dd><a href="javascript:;">收藏夹3</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href=""><i class="iconfont">&#xe609;</i>进货单</a>
        </li>
        <li class="layui-nav-item">
            <a href=""><i class="iconfont">&#xe625;</i>联系客服</a>
        </li>
        <li class="layui-nav-item">
            <a href=""><i class="iconfont">&#xe640;</i>我信</a>
        </li>
        <li class="layui-nav-item">
            <a href=""><i class="iconfont"></i>我要销售</a>
        </li>
    </ul>
</header>
<!--顶部导航结束-->
<!--商品中心区域开始-->
<div class="option-container">
    <div class="option container layui-form">
        <div class="products-center layui-inline">
            <a href="javascript:;">
                <img src="./img/products-center.png" alt="">
            </a>
        </div>
        <div class="user-option option-select layui-inline">
            <select name="city" lay-verify="">
                <option value="" selected>个人中心</option>
                <option value="010">修改密码</option>
                <option value="021">系统消息</option>
            </select>
        </div>
        <div class="account-option option-select layui-inline">
            <select name="city" lay-verify="">
                <option value="">账户设置</option>
                <option value="010">退出登录</option>
                <option value="021">切换账号</option>
            </select>
        </div>
    </div>
</div>
<!--商品中心区域结束-->

<div class="main container">
    <!--左侧导航开始-->
    <aside>
        <ul class="layui-nav layui-nav-tree layui-nav-side">
            <li class="layui-nav-item">
                <a href="javasript:;">
                    <i class="layui-icon iconfont">&#xe6db;</i>
                    <span>订单中心</span>
                </a>
                <dl class="layui-nav-child">
                    <dt>订单中心</dt>
                    <dd><a href="#">我的订单</a> </dd>
                    <dd><a href="#">售后管理</a> </dd>
                    <dd><a href="#">APP订单</a> </dd>
                </dl>
            </li> <li class="layui-nav-item">
            <a href="javasript:;">
                <i class="layui-icon iconfont">&#xe609;</i>
                <span>进货单</span>
            </a>
        </li>
            <li class="layui-nav-item">
                <a href="javasript:;">
                    <i class="layui-icon iconfont">&#xe612;</i>
                    <span>收藏中心</span>
                </a>
                <dl class="layui-nav-child">
                    <dt>收藏中心</dt>
                    <dd><a href="#">收藏的商品</a> </dd>
                    <dd><a href="#">收藏的供应商</a> </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javasript:;">
                    <i class="layui-icon iconfont">&#xe6a2;</i>
                    <span>资产中心</span>
                </a>
                <dl class="layui-nav-child">
                    <dt>资产中心</dt>
                    <dd><a href="#">充值</a> </dd>
                    <dd><a href="#">提现</a> </dd>
                    <dd><a href="#">转账</a> </dd>
                    <dd><a href="#">银行卡管理</a> </dd>
                    <dd><a href="#">账户余额</a> </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javasript:;">
                    <i class="layui-icon iconfont">&#xe607;</i>
                    <span>用户中心</span>
                </a>
                <dl class="layui-nav-child">
                    <dt>用户中心</dt>
                    <dd><a href="#">员工管理</a> </dd>
                    <dd><a href="#">岗位管理</a> </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javasript:;">
                    <i class="layui-icon iconfont">&#xe601;</i>
                    <span>报表分析</span>
                </a>
                <dl class="layui-nav-child">
                    <dt>报表分析</dt>
                    <dd><a href="#">采购分析图</a> </dd>
                    <dd><a href="#">收货订单明细表</a> </dd>
                    <dd><a href="#">商品排行榜</a> </dd>
                </dl>
            </li><li class="layui-nav-item">
            <a href="javasript:;">
                <i class="layui-icon iconfont">&#xe661;</i>
                <span>服务中心</span>
            </a>
            <dl class="layui-nav-child">
                <dt>服务中心</dt>
                <dd><a href="#">意见建议</a> </dd>
                <dd><a href="#">举报中心</a> </dd>
            </dl>
        </li>
            <li class="layui-nav-item">
                <a href="javasript:;">
                    <i class="layui-icon iconfont">&#xe614;</i>
                    <span>设置</span>
                </a>
                <dl class="layui-nav-child">
                    <dt>设置</dt>
                    <dd><a href="#">个人信息</a> </dd>
                    <dd><a href="#">收货地址</a> </dd>
                </dl>
            </li><li class="layui-nav-item">
            <a href="javasript:;">
                <i class="layui-icon iconfont">&#xe661;</i>
                <span>工厂目录</span>
            </a>
        </li>
        </ul>
    </aside>
    <!--左侧导航结束-->
    <!--主体内容开始-->
    <div class="bakground-content container">
        <div class="main-content">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li>关注的商品</li>
                    <li class="layui-this">关注的供应商</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item concerned-products ">
                        <ul class="products-list">
                            <li>
                                <div class="product-image">
                                    <a href="javascript:;">
                                        <img src="./img/ys3.png" alt="">
                                    </a>
                                </div>
                                <div class="product-price">
                                    <span>￥</span><span>58.00</span>
                                </div>
                                <p class="product-name">
                                    <a href="javascript:;">可以通过对选项卡设置属性 lay-id="xxx" 来作为唯一的匹配索引，以用于外部的定位切换，如后台的左侧导航、以及页面地址 hash的匹配</a>
                                </p>
                                <button class="layui-btn layui-btn-mini delete-btn"><i class="iconfont">&#xe626;</i></button>
                                <div class="mask">
                                    <p>确定要删除？</p>
                                    <button class="layui-btn layui-btn-mini b-btn">确定</button>
                                    <button class="layui-btn layui-btn-mini cacle-btn">取消</button>
                                </div>
                            </li>
                        </ul>
                        <div class="page">

                        </div>
                    </div>
                    <div class="layui-tab-item layui-show concerned-suppliers">
                        <ul class="suppliers-list">
                            <li>
                                <div class="supplier-info">
                                    <div class="supplier-pic">
                                        <img src="./img/meiyijia.jpg" alt="">
                                    </div>
                                    <p class="supplier-name">佳佳服饰</p>
                                    <p class="supplier-phone">联系电话:<span>13498765459</span></p>
                                    <p class="supplier-address">区域:<span>深圳南山</span></p>
                                </div>
                                <div class="delete-supplier">
                                    <button class="layui-btn layui-btn-mini delete-btn">
                                        <i class="iconfont">&#xe626;</i>
                                    </button>
                                </div>
                                <div class="supplier-products-list">
                                    <div class="supplier-product-operate">
                                        <button class="layui-btn layui-btn-mini hotsale-btn isActive">热销</button>
                                        <button class="layui-btn layui-btn-mini new-btn">新品</button>
                                        <a class="link-more" href="javascript:;">查看更多</a>
                                    </div>
                                    <div class="supplier-product">
                                        <ul class="supplier-product-list">
                                            <li>
                                                <a href="javascript:;">
                                                    <img src="./img/ys4.png" alt="">
                                                </a>
                                                <p class="product-tag"><span class="product-price">￥68.00</span></p>
                                            </li><li>
                                                <a href="javascript:;">
                                                    <img src="./img/ys4.png" alt="">
                                                </a>
                                                <p class="product-tag"><span class="product-price">￥68.00</span></p>
                                            </li><li>
                                                <a href="javascript:;">
                                                    <img src="./img/ys4.png" alt="">
                                                </a>
                                                <p class="product-tag"><span class="product-price">￥68.00</span></p>
                                            </li><li>
                                                <a href="javascript:;">
                                                    <img src="./img/ys4.png" alt="">
                                                </a>
                                                <p class="product-tag"><span class="product-price">￥68.00</span></p>
                                            </li><li>
                                                <a href="javascript:;">
                                                    <img src="./img/ys4.png" alt="">
                                                </a>
                                                <p class="product-tag"><span class="product-price">￥68.00</span></p>
                                            </li><li>
                                                <a href="javascript:;">
                                                    <img src="./img/ys4.png" alt="">
                                                </a>
                                                <p class="product-tag"><span class="product-price">￥68.00</span></p>
                                            </li><li>
                                                <a href="javascript:;">
                                                    <img src="./img/ys4.png" alt="">
                                                </a>
                                                <p class="product-tag"><span class="product-price">￥68.00</span></p>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--主体内容结束-->
</div>
<script src="./plugs/layui/layui.all.js"></script>
<script>
    layui.use(['element','form','laydate','laytpl','jquery','layer'],function () {
        var element=layui.element
        var form=layui.form
        var laydate=layui.laydate
        var laytpl=layui.laytpl
        var $=layui.$
        var layer=layui.layer

        $(".products-list").on("click",".delete-btn",function () {
            var _this=this
            $(_this).css("display","none !important")
            $(_this).parent().find(".mask").css("display","block")
        })

        $(".products-list").on("mouseleave",".mask",function () {
            $(this).css("display","none")
        })
    })
</script>
</body>
</html>
